Love them or hate them, `<Modal />` provides a solid foundation for creating dialogs, lightboxes, or whatever else.
The Modal component renders its `children` node in front of a backdrop component.

The Modal offers a few helpful features over using just a `<Portal/>` component and some styles:

- Manages dialog stacking when one-at-a-time just isn't enough.
- Creates a backdrop, for disabling interaction below the modal.
- It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
- It disables scrolling of the page content while open.
- Adds the appropriate ARIA roles are automatically.
- Easily-pluggable animations via a `<Transition/>` component.

Note that, in the same way the backdrop element prevents users from clicking or interacting
with the page content underneath the Modal, screen readers also need to be signaled to not to
interact with page content while the Modal is open. To do this, we use a common technique of applying
the `aria-hidden='true'` attribute to the non-Modal elements in the Modal `container`. This means that for
a Modal to be truly modal, it should have a `container` that is _outside_ your app's
React hierarchy (such as the default: document.body).

```jsx renderAsComponent
import { Modal } from "react-overlays";

let rand = () => Math.floor(Math.random() * 20) - 10;

const Backdrop = styled("div")`
  position: fixed;
  z-index: 1040;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  opacity: 0.5;
`;

// we use some pseudo random coords so nested modals
// don't sit right on top of each other.
const RandomlyPositionedModal = styled(Modal)`
  position: fixed;
  width: 400px;
  z-index: 1040;
  top: ${() => 50 + rand()}%;
  left: ${() => 50 + rand()}%;
  border: 1px solid #e5e5e5;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  padding: 20px;
`;

function ModalExample() {
  const [show, setShow] = useState(false);

  const renderBackdrop = (props) => <Backdrop {...props} />;

  return (
    <div className="modal-example">
      <button
        type="button"
        className="btn btn-primary mb-4"
        onClick={() => setShow(true)}
      >
        Open Modal
      </button>
      <p>Click to get the full Modal experience!</p>

      <RandomlyPositionedModal
        show={show}
        onHide={() => setShow(false)}
        renderBackdrop={renderBackdrop}
        aria-labelledby="modal-label"
      >
        <div>
          <h4 id="modal-label">Text in a modal</h4>
          <p>
            Duis mollis, est non commodo luctus, nisi erat
            porttitor ligula.
          </p>
          <ModalExample />
        </div>
      </RandomlyPositionedModal>
    </div>
  );
}

<ModalExample />;
```
